<script setup>
import { ref } from 'vue'

const emit = defineEmits(['timeUnitClicked'])
let monthActive = ref(true)
let weekActive = ref(false)
let dayActive = ref(false)
const props = defineProps({
  title: String,
  month: Boolean,
  week: Boolean,
  day: Boolean,
})

function handleBtnClick(val) {
  switch (val) {
    case '月':
      monthActive.value = true
      weekActive.value = false
      dayActive.value = false
      break
    case '周':
      monthActive.value = false
      weekActive.value = true
      dayActive.value = false
      break
    case '日':
      monthActive.value = false
      weekActive.value = false
      dayActive.value = true
      break
  }
  emit('timeUnitClicked', val)
}
</script>

<template>
  <div class="card">
    <div class="title">
      <div class="select left">
        <slot name="left"></slot>
      </div>
      <img
        v-if="
          props.title === '监控AI与场所码' ||
          props.title === '不同场所监控数量统计' ||
          props.title === '不同场所监控数量统计' ||
          props.title === '县乡村监控数量统计'
        "
        src="../views/community/components/img/title_left.png"
        width="40"
        height="9"
        alt=""
      />
      {{ props.title }}
      <img
        v-if="
          props.title === '监控AI与场所码' ||
          props.title === '不同场所监控数量统计' ||
          props.title === '不同场所监控数量统计' ||
          props.title === '县乡村监控数量统计'
        "
        src="../views/community/components/img/title_right.png"
        width="40"
        height="9"
        alt=""
      />
      <div class="select right">
        <slot name="right"></slot>
      </div>
    </div>
    <div class="content">
      <div class="btnGroup">
        <div v-if="props.month" :class="{ btn: true, btnActive: monthActive }" @click="handleBtnClick('月')">
          月
        </div>
        <div v-if="props.week" :class="{ btn: true, btnActive: weekActive }" @click="handleBtnClick('周')">
          周
        </div>
        <div v-if="props.day" :class="{ btn: true, btnActive: dayActive }" @click="handleBtnClick('日')">
          日
        </div>
      </div>
      <slot name="content"></slot>
    </div>
  </div>
</template>

<style lang="less" scoped>
.card {
  height: 25.83vh;
  width: 610px;
  background-image: url('../assets/691.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: white;
  .title {
    font-size: 14px;
    height: 32px;
    line-height: 28px;
    text-align: center;
    position: relative;
    .select {
      position: absolute;
      top: 0;
    }
    .left {
      font-size: 14px;
      left: 0;
    }
    .right {
      right: 0;
      line-height: 32px;
      padding-right: 10px;
      font-size: 14px;
      color: #00eafa;
      cursor: pointer;
    }
  }
  .content {
    position: relative;
    font-size: 16px;
    height: 22vh;
    margin: 0 10px 10px 10px;
    overflow: hidden;
    .btnGroup {
      z-index: 999;
      position: absolute;
      top: 5px;
      right: 10px;
      display: flex;
      flex-direction: row;
    }
  }
}
.btn {
  cursor: pointer;
  border: 1px solid #155faf;
  color: rgba(39, 207, 255, 1);
  border-radius: 3px;
  margin: 0 5px;
  font-size: 14px;
  padding: 3px 13px;
  background-color: #004fa9;
}
.btnActive {
  cursor: pointer;
  background-color: #034791;
  color: white;
}
</style>
